<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto">
			<el-card shadow="hover" class="mb10">
				<template #header>
					<span>业绩明细</span>
				</template>
				<div class="order-info-box">
					<el-form :model="state.orderData" label-position="left">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
										<el-form-item label="总金额:">
											<span>{{ state.performanceInfo.agentPerformanceTotal }} </span>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
										<el-form-item label="计入业绩金额:">
											<span>{{ state.performanceInfo.agentPerformanceMonth }}</span>
										</el-form-item>
									</el-col>

								</el-row>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-card>
			<el-card shadow="hover" class="mb10">
				<template #header>
					<span>个人信息</span>
				</template>
				<div class="order-info-box">
					<el-form :model="state.orderData" label-position="left">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
										<el-form-item label="姓名:">
											<span>{{ state.performanceInfo.agentName }} </span>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
										<el-form-item label="手机号:">
											<span>{{ state.performanceInfo.agentPhone }}</span>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
										<el-form-item label="加入时间:">
											<span>{{ formatDate(new Date(state.performanceInfo.createTime), 'YYYY-mm') }}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-card>
			<el-card shadow="hover" class="mb10">
				<template #header>
					<span>代理信息</span>
				</template>
				<div class="order-info-box">
					<el-form :model="state.orderData" label-position="left">
						<el-row :gutter="35">
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<el-row :gutter="35">
									<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
										<el-form-item label="代理类型:">
											<span>{{ state.performanceInfo.agentLevelName }} </span>
										</el-form-item>
									</el-col>
									<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
										<el-form-item label="代理状态:">
											<span>{{ state.performanceInfo.agentStatus == 1 ? '开启' : '关闭' }}</span>
										</el-form-item>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-form>
				</div>
			</el-card>
			<el-card shadow="hover" style="display: flex;flex-direction: column;flex: 1;height: inherit;">
				<section style="display: flex;flex-direction: column; flex: 1;height: inherit;">

					<el-table :data="state.tableData.data" v-loading="state.tableData.loading">

						<el-table-column label="时间" show-overflow-tooltip>
							<template #default="scope">
								<div>
									<div>
										{{ formatDate(new Date(scope.row.createTime), 'YYYY-mm-dd HH:MM:SS')
										}}
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="姓名" show-overflow-tooltip>
							<template #default="scope">
								<div>
						 {{ scope.row.agentName }}

								</div>
							</template>
						</el-table-column>
						<el-table-column label="手机号" show-overflow-tooltip>
							<template #default="scope">
								<div>
						 {{ scope.row.agentPhone }}

								</div>
							</template>
						</el-table-column>
						<el-table-column label="业绩" show-overflow-tooltip>
							<template #default="scope">
								<div>
									{{ scope.row.agentPerformanceTotal }}
								</div>
							</template>
						</el-table-column>

						<el-table-column label="月末时类型" show-overflow-tooltip>
							<template #default="scope">
								<span> {{ scope.row.agentLevelName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="月末时状态" show-overflow-tooltip>
							<template #default="scope">
								<span> {{ scope.row.agentStatus==1?'开启':'关闭' }}</span>
							</template>
						</el-table-column>

					</el-table>
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
								:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
								background v-model:page-size="state.tableData.param.pageSize"
								layout="total, sizes, prev, pager, next, jumper" :total="state.tableData.total">
							</el-pagination>
						</el-col>
					</el-row>
				</section>
			</el-card>
		</div>
		<addSpecsDialog ref="addSpecsDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getAgentPerformanceList } from "/@/api/agent";
import { formatDate } from '/@/utils/formatTime';
import router from '/@/router';
import { useRoute } from 'vue-router';
const route = useRoute();

// 引入组件
const addSpecsDialog = defineAsyncComponent(() => import('/@/views/commodity/goodspecs/components/addSpecsDialog.vue'));

// 定义变量内容
const addSpecsDialogRef = ref();
const state = reactive<any>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			pageNum: 1,
			pageSize: 10,
		},
	},
	agentId: "",//业绩id
	performanceInfo: <any>{}


});


// 获取商品列表
const getTableData = async () => {
	state.tableData.loading = true;
	console.log(state.agentId)
	getPerformanceList()
	// 明细详情
	let params = <any>{
		agentId: state.agentId,
		current: state.tableData.param.pageNum,
		size: state.tableData.param.pageSize,
		searchType:"1"
	}
	const { results } = await getAgentPerformanceList(params);
	// 明细 查询个人信息及业绩

	state.tableData.loading = false;
	state.tableData.data = results.records;
	state.tableData.total = results.total;
}
const getPerformanceList = async () => {
	let perFormanceParams = <any>{
		agentId: state.agentId,
	}
	if (state.tableData.param.performanceMonth != "") {
		perFormanceParams.time = state.tableData.param.performanceMonth
	}
	const { results } = await getAgentPerformanceList(perFormanceParams);
	state.performanceInfo = results.records[0]
}

const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
};

// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};
const getRouteInfo = () => {
	let id = route.query.id
	state.agentId = id
	if (id) {
		getTableData();

	}

}

// 页面加载时
onMounted(() => {
	getRouteInfo()
});
</script>

<style scoped lang="scss">
@import '../../../theme/mixins/index.scss';

:deep(.el-card__body) {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: inherit;

	.el-table {
		flex: 1;

		.el-table__inner-wrapper::before {
			background: none !important;
		}
	}
}
</style>
